<template>
	<div class='pageBox'>
		<div class="page-head">房地产市场交易监测分析</div>
		<div class="page-body">
			<div class="body-left">
				<div class="page-grid house-property-land-supply-statistics">
					<div class="grid-title flex jsb ac">
						<span>房地产土地供应统计</span>
						<div class="city-select">
							<el-select v-model="cityObjfdctdgytj.cityCode" size="small" @change="fdctdgytjCity">
								<el-option v-for="item in cityList" :key="item.value" :label="item.label"
									:value="item.value" class="select-option-city" />
							</el-select>
						</div>
					</div>
					<div class="grid-body">
						<div class="grid-body-top flex jsb">
							<div class="grid-body-child">
								<div class="child-title flex ac jsb">当前房屋建筑面积统计
									<el-date-picker class="date-picker-model" v-model="houseAreaStructureData.queryYear"
										type="year" size="small" start-placeholder="请选择开始年份" end-placeholder="请选择结束年份"
										value-format="YYYY" :clearable="false" @change="houseAreaStructureGetTime" />
								</div>
								<usePie v-if="houseAreaStructure.seriesData.length > 0"
									:housingSupplyStatsData="houseAreaStructure" class="pieH"
									@dialogPieData="dialogPieData"></usePie>
							</div>
							<div class="grid-body-child">
								<div class="child-title">土地供应走势</div>
								<div class="pieH">
									<barLinePublic v-if="landSupplyTrend.xAxisData.length > 0"
										:housingSupplyStatsData="landSupplyTrend" class="pieH" @dialogData="dialogData">
									</barLinePublic>
								</div>
							</div>
						</div>
						<div class="grid-body-bottom">
							<div class="grid-body-child">
								<div class="child-title flex ac jsb">各市区建筑面积统计
									<el-date-picker class="date-picker-model"
										v-model="statisticsAreaEachUrbanData.queryYear" type="year" size="small"
										placeholder="2024" start-placeholder="请选择开始年份" end-placeholder="请选择结束年份"
										value-format="YYYY" :clearable="false"
										@change="statisticsAreaEachUrbanGetTime" />
								</div>
								<barStacked class="h130" v-if="statisticsAreaEachUrban.legendData.length > 0"
									:housingSupplyStatsData="statisticsAreaEachUrban" @dialogData="dialogData">
								</barStacked>
							</div>
						</div>
					</div>
				</div>
				<div class="page-grid real-estate-trans-num-statistics">
					<div class="grid-title flex jsb ac">
						<span>房产交易套数统计</span>
						<div class="city-select">
							<el-select v-model="cityObjffcjytstj.cityCode" size="small" @change="ffcjytstjCity">
								<el-option v-for="item in cityList" :key="item.value" :label="item.label"
									:value="item.value" class="select-option-city" />
							</el-select>
						</div>
					</div>
					<div class="grid-body flex">
						<div class="grid-body-child ">
							<div class="child-title-tab flex jsb ac">
								<div class="child-title">房屋交易套数走势</div>
								<div class="grid-tabs flex">
									<div class="tabs-list" :class="item.isSelect ? 'tabs-list-click' : ''"
										v-for="(item, index) in fwjytszs" :key="index"
										@click="fwjytszsIndexChild(index)">{{ item.title }}</div>
								</div>
							</div>
							<barLinePublic v-if="houseTradSuiteTrend.xAxisData.length > 0"
								:housingSupplyStatsData="houseTradSuiteTrend" class="h165" @dialogData="dialogData">
							</barLinePublic>
						</div>
						<div class="grid-body-child gsqfcjytj">
							<div class="child-title-tab flex jsb ac">
								<div class="child-title ">各市区房产交易统计</div>
								<div class="time-select">
									<el-date-picker class="date-picker-model"
										v-model="statisticsaAreaHouseDealData.queryYear" type="year" size="small"
										start-placeholder="请选择开始年份" end-placeholder="请选择结束年份" value-format="YYYY"
										:clearable="false" @change="statisticsaAreaHouseDealDataGetTime" />
								</div>
								<div class="grid-tabs flex">
									<div class="tabs-list" :class="item.isSelect ? 'tabs-list-click' : ''"
										v-for="(item, index) in gsqfcjytj" :key="index"
										@click="gsqfcjytjIndexChild(index)">{{
											item.title }}</div>
								</div>
							</div>
							<barStacked1 class="h165" v-if="statisticsaAreaHouseDeal.legendData.length > 0"
								:housingSupplyStatsData="statisticsaAreaHouseDeal" @dialogData="dialogData">
							</barStacked1>
						</div>
					</div>
				</div>
				<div class="page-grid real-estate-investment-data-statistics">
					<div class="grid-title flex jsb ac gdfdctzsjtj">
						<span>各地房地产投资数据统计</span>
						<div class="time-select">
							<el-date-picker class="date-picker-model" v-model="threeBarTime" type="year" size="small"
								start-placeholder="请选择开始年份" end-placeholder="请选择结束年份" value-format="YYYY"
								:clearable="false" @change="threeBarTimeGet" />
						</div>
					</div>
					<div class="grid-body flex jsb">
						<div class="grid-body-child">
							<div class="child-title">固定资产投资增速</div>
							<barLinePublic v-if="fixedInvestmentsSpeed.xAxisData.length > 0"
								:housingSupplyStatsData="fixedInvestmentsSpeed" class="h135" @dialogData="dialogData">
							</barLinePublic>
						</div>
						<div class="grid-body-child">
							<div class="child-title">项目建成投产率</div>
							<barLinePublic v-if="projectComInvestmentRate.xAxisData.length > 0"
								:housingSupplyStatsData="projectComInvestmentRate" class="h135"
								@dialogData="dialogData">
							</barLinePublic>
						</div>
						<div class="grid-body-child">
							<div class="child-title">建设项目投资增长率</div>
							<barLinePublic v-if="projectConInvestmentRate.xAxisData.length > 0"
								:housingSupplyStatsData="projectConInvestmentRate" class="h135"
								@dialogData="dialogData">
							</barLinePublic>
						</div>
					</div>
				</div>
			</div>
			<div class="body-right">
				<div class="body-right-top flex jsb">
					<div class="map-box" style="position:relative;">
						<mapBox v-if="realEstateMiddleData.regions[0].length > 0"
							:housingSupplyStatsData="realEstateMiddleData" @mapNameChange="mapNameChange"
							style="height: 100%; width: 100%"></mapBox>
						<div class="map-address">辽宁省 {{ cityObj.cityName == "" ? "" : "-" + cityObj.cityName }}</div>
					</div>
					<div class="page-grid house-trans-price-statistics">
						<div class="grid-title flex">
							<span>房屋交易价格情况统计</span>
							<div class="city-select">
								<el-select v-model="cityObjfwjyjgqktj.cityCode" size="small" @change="fwjyjgqktjCity">
									<el-option v-for="item in cityList" :key="item.value" :label="item.label"
										:value="item.value" class="select-option-city" />
								</el-select>
							</div>
						</div>
						<div class="grid-body">
							<div class="grid-body-top">
								<div class="grid-body-child">
									<div class="child-title-tab flex jsb ac">
										<div class="child-title">各市区交易均价分布</div>
										<div class="child-title-right">
											<span @click="returnProvince()" style="cursor: pointer;">辽宁省</span> <span
												@click="returnCity(activeCityName)"
												style="cursor: pointer;">{{ activeCityName ? `-${activeCityName}` : '' }}</span>
											<span>{{ activeAreaName ? `-${activeAreaName}` : '' }}</span>
										</div>
									</div>
									<div class="h170" v-if="houseTransPriceStatisticeData.queryType3 == 3">
										<barLinePublic v-if="houseTransPriceStatisticeBar?.xAxisData?.length > 0"
											:housingSupplyStatsData="houseTransPriceStatisticeBar" class="h170"
											@getCode="getCode">
										</barLinePublic>
									</div>
									<div class="h170" style="position: relative;" v-else>
										<!-- <boxplot v-if="houseTransPriceStatistice.seriesData.length > 0"
											:housingSupplyStatsData="houseTransPriceStatistice"
											@getCode="getCode">
										</boxplot> -->
										<boxplot-sales-trend v-if="houseTransPriceStatistice.xAxisData?.length"
											ref="salesTrendArealDistribution" :boxplotData="houseTransPriceStatistice"
											class="h118" @getCode="getCode"></boxplot-sales-trend>
									</div>
								</div>
							</div>
							<div class="grid-body-bottom flex">
								<div class="grid-body-child ">
									<div class="child-title-tab flex jsb ac">
										<div class="child-title">房屋交易均价走势</div>
										<div class="grid-tabs flex">
											<div class="tabs-list"
												:class="housePriceTransTrendData.queryType1 == index + 1 ? 'tabs-list-click' : ''"
												v-for="(item, index) in fwjyjjzs" :key="index"
												@click="fwjyjjzsIndexChild(index + 1)">{{
													item }}</div>
										</div>
									</div>
									<barLinePublic v-if="housePriceTransTrend.xAxisData.length > 0"
										:housingSupplyStatsData="housePriceTransTrend" class="h180"
										@dialogData="dialogData">
									</barLinePublic>
								</div>
								<div class="grid-body-child gdqfwjyjjtj">
									<div class="child-title-tab flex jsb ac" style="flex-wrap: nowrap;">
										<div class="child-title">各地区房屋交易均价统计</div>
										<div class="time-select">
											<el-date-picker class="date-picker-model"
												v-model="housePriceTransStatisticsData.queryYear" type="year"
												size="small" start-placeholder="请选择开始年份" end-placeholder="请选择结束年份"
												value-format="YYYY" :clearable="false"
												@change="housePriceTransStatisticsTime" />
										</div>
										<div class="grid-tabs flex" style="flex-wrap: nowrap;">
											<div class="tabs-list"
												:class="housePriceTransStatisticsData.queryType1 == index + 1 ? 'tabs-list-click' : ''"
												v-for="(item, index) in fwjyjjzs1" :key="index"
												@click="fwjyjjzsIndexChild1(index + 1)">{{
													item }}</div>
										</div>
									</div>
									<barLinePublic v-if="housePriceTransStatistics.xAxisData.length > 0"
										:housingSupplyStatsData="housePriceTransStatistics" class="h180"
										@dialogData="dialogData">
									</barLinePublic>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="body-right-bottom">
					<div class="page-grid">
						<div class="grid-title1 flex jsb">
							<span>房屋交易行为分析</span>
							<div class="flex ac time-city" style="position: relative;">
								<div class="time-select">
									<el-date-picker class="date-picker-model" v-model="cityObjfourPieData.queryDate"
										type="month" size="small" start-placeholder="请选择开始年份" end-placeholder="请选择结束年份"
										value-format="YYYY-MM" :clearable="false" @change="getTime" />
								</div>
								<div class="city-select sps">
									<el-select v-model="cityObjfourPieData.cityCode" size="small"
										@change="foutPiejCity">
										<el-option v-for="item in cityList" :key="item.value" :label="item.label"
											:value="item.value" class="select-option-city" />
									</el-select>
								</div>
							</div>
						</div>
						<div class="grid-body flex">
							<div class="grid-body-child">
								<div class="control-box">
									<div class="control-box-item flex ac flex-align-start">
										<div class="control-item-name">房屋类型</div>
										<div class="control-item-label jsb fands">
											<span class="control-label-list" @click="houseTypeIndexSet(item)"
												:class="item.isSelected ? 'control-label-list-active' : ''"
												v-for="(item, index) in houseType" :key="index">{{ item.value }}</span>
										</div>
										<div class="control-all" @click="houseTypeAll">全选</div>
									</div>
									<div class="control-box-item flex ac m30 flex-align-start">
										<div class="control-item-name">户型类型</div>
										<div class="control-item-label fands">
											<div class="control-label-list " @click="houseTypeIndexSet1(item)"
												:class="item.isSelected ? 'control-label-list-active' : ''"
												v-for="(item, index) in roomType" :key="index">{{ item.value }}</div>
										</div>
										<div class="control-all" @click="roomTypeAll">全选</div>
									</div>
									<div class="control-box-item flex ac m20 jsb">
										<div class="control-item-name">价格</div>
										<div class="control-silder">
											<el-slider v-model="housePrice" range :min="0" :max="50000" /><span
												class="silder-money">{{ housePrice[0] }}</span><span>~</span><span
												class="silder-money">{{ housePrice[1] }}</span><span class="unit">元</span>
										</div>
									</div>
									<div class="control-box-item flex ac jsb">
										<div class="control-item-name">面积</div>
										<div class="control-silder">
											<el-slider v-model="houseArea" range :min="0" :max="200" /><span
												class="silder-money">{{ houseArea[0] }}</span><span>~</span><span
												class="silder-money">{{ houseArea[1] }}</span><span class="unit">m²</span>
										</div>
									</div>
									<div class="control-button" @click="search">查询</div>
								</div>
							</div>
							<div class="grid-body-child scatter">
								<scatterDiagram v-if="scatterDiagramData.seriesData.length > 0"
									:housingSupplyStatsData="scatterDiagramData" class="h348"
									@scatterDiagramMagfiil="scatterDiagramMagfiil">
								</scatterDiagram>
							</div>
							<div class="grid-body-child pie-box flex" style="position: relative;">
								<div class="pieTab">
									<div class="pieTab-index"
										:class="cityObjfourPieData.queryType1 == 1 ? 'pieTab-index-active' : ''"
										@click="pieTab(1)">房屋类型</div>
									<div class="pieTab-index"
										:class="cityObjfourPieData.queryType1 == 3 ? 'pieTab-index-active' : ''"
										@click="pieTab(3)">户型类型</div>
								</div>
								<div class="pie-list">
									<div class="pie-title">首套购房</div>
									<usePie1 v-if="buyHouseTypeFirst.seriesData.length > 0"
										:housingSupplyStatsData="buyHouseTypeFirst" class="h140"
										@dialogPieData1="dialogPieData1"></usePie1>
								</div>
								<div class="pie-list">
									<div class="pie-title">二套购房</div>
									<usePie1 v-if="buyHouseTypeTwo.seriesData.length > 0"
										:housingSupplyStatsData="buyHouseTypeTwo" class="h140"
										@dialogPieData1="dialogPieData1"></usePie1>
								</div>
								<div class="pie-list">
									<div class="pie-title">多套购房</div>
									<usePie1 v-if="buyHouseTypeMore.seriesData.length > 0"
										:housingSupplyStatsData="buyHouseTypeMore" class="h140"
										@dialogPieData1="dialogPieData1"></usePie1>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<magnify v-if="magnifyEchartData" :housingSupplyStatsData="magnifyEchartData" @closeDialog="closeDialog">
		</magnify>
		<magnifyPie v-if="magnifyPieEchartData" :housingSupplyStatsData="magnifyPieEchartData"
			@closePieDialog="closePieDialog"></magnifyPie>
		<magnifyPie1 v-if="magnifyPieEchartData1" :housingSupplyStatsData="magnifyPieEchartData1"
			@closePieDialog1="closePieDialog1"></magnifyPie1>
		<barPiemagnifys v-if="magnifyPieEcData" :housingSupplyStatsData="magnifyPieEcData"
			@closeBarPiemagnify="closeBarPiemagnify"></barPiemagnifys>
		<scatterDiagramMagfiils v-if="magnifyPieCcatterData" :housingSupplyStatsData="magnifyPieCcatterData"
			@closeSctterDialog="closeSctterDialog">
		</scatterDiagramMagfiils>
	</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
import { barLineParamsData } from "@/utils/chartsPbulic";
import usePie from '@/components/houseDetecAnalysis/pie.vue'
import usePie1 from '@/components/houseDetecAnalysis/pie1.vue'
import barLinePublic from "@/components/houseDetecAnalysis/barLinePbulic.vue";
import barStacked from "@/components/houseDetecAnalysis/barStacked.vue";
import barStacked1 from "@/components/houseDetecAnalysis/barStacked1.vue";
import scatterDiagram from "@/components/houseDetecAnalysis/scatterDiagram.vue";
import boxplot from "@/components/houseDetecAnalysis/boxplot.vue";
import mapBox from "@/components/houseDetecAnalysis/map.vue";
import { relative } from 'path';
import { getCityName } from '@/utils/cityList'
import magnify from "@/components/public/magnify.vue";
import magnifyPie from "@/components/houseDetecAnalysis/magnifyPie.vue";
import magnifyPie1 from "@/components/houseDetecAnalysis/magnifyPie1.vue";
import barPiemagnifys from "@/components/houseAdmin/barPiemagnify.vue";
import scatterDiagramMagfiils from "@/components/houseDetecAnalysis/scatterDiagramMagfiil.vue";
import boxplotSalesTrend from "@/components/houseDetecAnalysis/boxplotSalesTrend.vue"
import {
	getRegionList,
	getCurrentHouseBuildArea,
	getLandSupplyTrend,
	getRegionBuildAreaBar,
	getHouseTradeNumTrend,
	getHouseTradeNumStatistics,
	getInvestmentDataStatistics,
	getHouseTradePriceTrend,
	getHouseTradePriceStatistics,
	getHouseTradePriceDistributed,
	selectThermodynamic,
	getHouseTradeBehavioralAnalysis,
	getHouseTradeBehavioralAnalysisPie,
} from '@/api/houseDetecAnalysis'
import item from 'element-plus/es/components/space/src/item';

const magnifyEchartData = ref(null)//放大框
const magnifyPieEchartData = ref(null)//饼图放大框
const magnifyPieEchartData1 = ref(null)//饼图放大框1
const magnifyPieEcData = ref(null)
const magnifyPieCcatterData = ref(null)//散点图弹框
const fixedCityCode = localStorage.getItem("cityCode")
const cityCodeDowm = ref(localStorage.getItem("cityCode")) //获取下拉的code
const currentDate = new Date();
const cityObj = ref({
	cityName: "",
	cityCode: "",
})
const cityObjfdctdgytj = ref({//房地产土地供应统计code
	cityName: "",
	cityCode: localStorage.getItem("cityCode"),
});
const cityObjffcjytstj = ref({//房产交易套数统计code
	cityName: "",
	cityCode: localStorage.getItem("cityCode"),
});
const cityObjgdfdctzsjtj = ref({//各地房地产投资数据统计code
	cityName: "",
	cityCode: localStorage.getItem("cityCode"),
});
const cityObjfwjyjgqktj = ref({//房屋交易价格情况统计code
	cityName: "",
	cityCode: localStorage.getItem("cityCode"),
});
const cityObjfwjyxwfx = ref({//房屋交易行为分析code
	cityName: "",
	cityCode: localStorage.getItem("cityCode"),
});
const cityObjfourPieData = ref({
	cityName: "",
	cityCode: '210100',
	queryType1: 1,
	queryDate: '',
})
const salesTrendArealDistribution = ref(null) // 房地产销售趋势分析-面积分布-domref
const houseAreaStructureData = ref({//当前房屋建筑面积统计参数
	queryYear: '',
	cityCode: ''
})
const landSupplyTrendData = ref({//土地供应走势参数
	cityCode: ''
})
const statisticsAreaEachUrbanData = ref({//各市区建筑面积统计参数
	cityCode: '',
	queryYear: ''
})
const houseTradSuiteTrendData = ref({//房产交易套数走势参数
	cityCode: '',
	queryType1: 1,
})
const statisticsaAreaHouseDealData = ref({//各市区房产交易统计参数
	cityCode: '',
	queryType1: 1,
	queryYear: ''
})
const fixedInvestmentsSpeedData = ref({//固定资产投资增速参数
	cityCode: '',
	queryType2: 1,
	queryYear: currentDate.getFullYear() - 2
})
const projectComInvestmentRateData = ref({//项目建成投产率参数
	cityCode: '',
	queryType2: 2,
	queryYear: currentDate.getFullYear() - 2
})
const projectConInvestmentRateData = ref({//	建设项目投资增长率参数
	cityCode: '',
	queryType2: 3,
	queryYear: currentDate.getFullYear() - 2
})
const houseTransPriceStatisticeData = ref({//各市区交易均价分布参数
	cityCode: '',
	queryYear: currentDate.getFullYear() - 1,
	queryType3: 0,
})
const housePriceTransTrendData = ref({//房屋交易均价走势参数
	cityCode: '',
	queryType1: 1,
})
const housePriceTransStatisticsData = ref({//各地区房屋交易均价统计参数
	cityCode: '',
	queryType1: 1,
	queryYear: ''
})
const scatterDiagramInfo = ref({//散点图请求参数
	fwlxList: [],
	hxList: [],
	cityCode: '',
	queryDate: (currentDate.getFullYear() - 2) + '-01',
})
const buyHouseTypeFirstData = ref({//首套购房参数
	cityCode: localStorage.getItem("cityCode"),
	queryDate: '',
	queryType1: 1,
	queryType4: 1,
})
const buyHouseTypeTwoData = ref({//二套购房参数
	cityCode: localStorage.getItem("cityCode"),
	queryDate: '',
	queryType1: 1,
	queryType4: 2,
})
const buyHouseTypeMoreData = ref({//多套购房参数
	cityCode: localStorage.getItem("cityCode"),
	queryDate: '',
	queryType1: 1,
	queryType4: 3,
})





const houseAreaStructure = ref({//当前房屋建筑面积统计
	seriesData: <any>[]
})
const landSupplyTrend = ref({//土地供应走势
	xAxisData: <any>[],
})
const statisticsAreaEachUrban = ref({//各市区建筑面积统计
	legendData: <any>[],
})
const houseTradSuiteTrend = ref({//房屋交易套数走势
	xAxisData: <any>[],
})
const statisticsaAreaHouseDeal = ref({//各市区房产交易统计
	legendData: <any>[],
})
const fixedInvestmentsSpeed = ref({//固定资产投资增速
	xAxisData: <any>[],
})
const projectComInvestmentRate = ref({//项目建成投资率
	xAxisData: <any>[],
})
const projectConInvestmentRate = ref({//建设项目投资增长率
	xAxisData: <any>[],
})
const houseTransPriceStatistice = ref({//各市区交易均价分布
	// seriesData: <any>[]
	xAxisData: [],
	boxData: [],
	xAxisBgColor: [],
	scatterData: [],
	yAxisMaxNumArray: [],
	yAxisName: '元',
	code: []
})
const houseTransPriceStatisticeBar = ref({//各市区交易均价分布柱状图
	xAxisData: <any>[],
})
const housePriceTransTrend = ref({//房屋均价交易走势
	xAxisData: <any>[],
})
const housePriceTransStatistics = ref({//各地区房屋均价交易走势
	xAxisData: <any>[],
})
const scatterDiagramData = ref({//房屋交易行为分析-散点图
	seriesData: <any>[]
})
const buyHouseTypeFirst = ref({//首套购房
	seriesData: <any>[]
})
const buyHouseTypeTwo = ref({//二套购房
	seriesData: <any>[]
})
const buyHouseTypeMore = ref({//多套购房
	seriesData: <any>[]
})
const realEstateMiddleData = ref({//地图
	regions: [[]],
});
// '户型分类', '面积分类', '房屋类型'
const fwjytszs = ref<any>([
	{
		title: '户型分类',
		value: 3,
		isSelect: true,
	},
	{
		title: '面积分类',
		value: 2,
		isSelect: false,
	},
	{
		title: '房屋分类',
		value: 1,
		isSelect: false,
	},
])
const gsqfcjytj = ref<any>([
	{
		title: '户型分类',
		value: 3,
		isSelect: true,
	},
	{
		title: '面积分类',
		value: 2,
		isSelect: false,
	},
	{
		title: '房屋分类',
		value: 1,
		isSelect: false,
	},
])
const fwjyjjzs = ref<any>(['房屋类型', '面积分类', '户型分类'])
const fwjyjjzs1 = ref<any>(['房屋类型', '面积分类', '户型分类'])
const fwjytszsIndex = ref(0)
const gsqfcjytjIndex = ref(0)
const fwjyjjzsIndex = ref(0)
const fwjyjjzsIndex1 = ref(0)
const cityList = ref<any>([//房屋交易价格情况统计-城市下拉
	{ label: '辽宁省', value: '210000' },
	{ label: '沈阳市', value: '210100' },
	{ label: '大连市', value: '210200' },
	{ label: '鞍山市', value: '210300' },
	{ label: '抚顺市', value: '210400' },
	{ label: '本溪市', value: '210500' },
	{ label: '丹东市', value: '210600' },
	{ label: '锦州市', value: '210700' },
	{ label: '营口市', value: '210800' },
	{ label: '阜新市', value: '210900' },
	{ label: '辽阳市', value: '211000' },
	{ label: '盘锦市', value: '211100' },
	{ label: '铁岭市', value: '211200' },
	{ label: '朝阳市', value: '211300' },
	{ label: '葫芦岛市', value: '211400' },
])

// const houseType = ref<any>(['别墅', '高层', '小高层', '洋房']) //房屋交易行为分析-房屋类型tab
const houseType = ref<any>([ //房屋交易行为分析-房屋类型tab
	{
		value: '别墅',
		isSelected: false
	},
	{
		value: '高层住宅',
		isSelected: false
	},
	{
		value: '小高层住宅',
		isSelected: false
	},
	{
		value: '洋房',
		isSelected: false
	},
]) //房屋交易行为分析-房屋类型tab
let houseTypeIndex = ref([])
// const roomType = ref<any>(['一居室', '两居室', '三居室', '四居室', '五居室', '五居室以上']) //房屋交易行为分析-户型类型tab
const roomType = ref<any>([
	{
		value: '一居室',
		isSelected: false
	},
	{
		value: '二居室',
		isSelected: false
	},
	{
		value: '三居室',
		isSelected: false
	},
	{
		value: '四居室',
		isSelected: false
	},
	{
		value: '五居室',
		isSelected: false
	},
	// {
	// 	value: '五居室以上',
	// 	isSelected: false
	// },
])
const roomTypeIndex = ref(0)
const selectValueCity1 = ref(localStorage.getItem("cityCode"))//市下拉选中项
const timeValue = ref(null)//底部选择年份
const housePrice = ref([0, 50000])
const houseArea = ref([0, 200])
const threeBarTime = ref(null) //左下角三个地图时间
const activeCityName = ref(null)//右上角市名
const activeAreaName = ref(null)//右上角区名
const fatherCode = ref(null)//盒须图面包屑导航
//当前房屋建筑面积统计
const houseAreaStructureGet = async () => {
	houseAreaStructureData.value.cityCode = cityObjfdctdgytj.value.cityCode
	let { data } = await getCurrentHouseBuildArea(houseAreaStructureData.value)
	let echartParams = {
		gridStyle: {
			show: true
		},
		legendStyle: {
			show: true,
			icon: "rect",
			left: 'center', // 设置图例居中
			top: 0,
			bottom: 0,
			right: 0,
			itemWidth: 10,
			itemHeight: 10,
			itemGap: 36,
		},
		seriesStyle: {
			radius: [45, 60],
			center: ['55%', '55%'],
			itemStyle: {
				borderRadius: 0,
				borderWidth: 0
			},
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 18,
					fontWeight: 'bold'
				}
			},
			labelLine: {
				show: false
			},
		},
		seriesData: [
			data
		]
	}
	houseAreaStructure.value = echartParams
}
//土地供应走势
const landSupplyTrendGet = async () => {
	landSupplyTrendData.value.cityCode = cityObjfdctdgytj.value.cityCode

	let { data } = await getLandSupplyTrend(landSupplyTrendData.value)
	let legendStyle = {
		show: true,
		icon: "rect",
		left: 'center',
		top: 0,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 36,
	};
	let gridConfig = {
		left: "5%",
		right: "5%",
		bottom: "3%",
		top: "25%",
	};
	let paramsData = barLineParamsData(
		['施工', '竣工', '新开工'],
		data.xAxis,
		[
			{
				name: "",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: "1",
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: "1",
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: "1",
				areaStyleType: "1",
				stack: "1",
			}
		],
		[
			data.zj,
			data.kg,
			data.gh
		],
		[
			{
				a: "rgba(84, 112, 198, 1)",
				b: "rgba(84, 112, 198, 0)",
			},
			{
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 0)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 0)",
			},
		],
		legendStyle,
		gridConfig
	);
	landSupplyTrend.value = paramsData
}
//各市区建筑面积统计
const statisticsAreaEachUrbanGet = async () => {
	statisticsAreaEachUrbanData.value.cityCode = cityObjfdctdgytj.value.cityCode
	let { data } = await getRegionBuildAreaBar(statisticsAreaEachUrbanData.value)
	const names: Array<any> = [];

	data.forEach((item: { name: any; }) => {
		names.push(item.name);
	});


	let legendStyle = {
		show: true,
		icon: "rect",
		left: 'center',
		top: 0,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 36,
	};
	let gridConfig = {
		left: "1%",
		right: "1%",
		bottom: "5%",
		top: "25%",
	};
	let paramsData = barLineParamsData(
		['施工', '竣工', '新开工'],
		names,
		[
			{
				name: "m²",
				type: "1",
			},
		],
		[
			{
				name: "bar",
				type: "1",
				areaStyleType: "1",
				stack: "one",
			},
			{
				name: "bar",
				type: "1",
				areaStyleType: "1",
				stack: "one",
			},
			{
				name: "bar",
				type: "1",
				areaStyleType: "1",
				stack: "one",
			}
		],
		data,
		// [
		// 	underConstruction,
		// 	notStarted,
		// 	planned,
		// ],
		[
			{
				a: "rgba(84, 112, 198, 1)",
				b: "rgba(84, 112, 198, 1)",
			},
			{
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 1)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 1)",
			},
		],
		legendStyle,
		gridConfig
	);
	statisticsAreaEachUrban.value = paramsData
}
//房屋交易套数走势
const houseTradSuiteTrendGet = async () => {
	houseTradSuiteTrendData.value.cityCode = cityObjffcjytstj.value.cityCode
	let { data } = await getHouseTradeNumTrend(houseTradSuiteTrendData.value)
	const names: Array<any> = [];
	const valuesArrays: Array<any> = [];
	data.yAxis.forEach((item: { name: any; }) => {
		names.push(item.name);
	});
	data.yAxis.forEach((item: { value: any; }) => {
		valuesArrays.push(item.value);
	});

	let legendStyle = {
		show: true,
		icon: "rect",
		left: 'center',
		top: 0,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 5,
	};
	let gridConfig = {
		left: "1%",
		right: "1%",
		bottom: "0%",
		top: "25%",
	};
	let paramsData = barLineParamsData(
		names,
		data.xAxis,
		[
			{
				name: "",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		valuesArrays,
		[
			{
				a: "rgba(84, 112, 198, 1)",
				b: "rgba(84, 112, 198, 1)",
			},
			{
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 1)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 1)",
			},
			{
				a: "#2AC6D7",
				b: "#2AC6D7",
			},
			{
				a: "#F00D30",
				b: "#F00D30",
			},
			{
				a: "#CD83FF",
				b: "#CD83FF",
			},
		],
		legendStyle,
		gridConfig
	);
	houseTradSuiteTrend.value = paramsData
}
//各市区房产交易统计
const statisticsaAreaHouseDealGet = async () => {
	statisticsaAreaHouseDealData.value.cityCode = cityObjffcjytstj.value.cityCode
	let { data } = await getHouseTradeNumStatistics(statisticsaAreaHouseDealData.value)
	const names: Array<any> = [];
	data.yAxis.forEach((item: { name: any; }) => {
		names.push(item.name);
	});
	const typeData = []
	data.yAxis.forEach((item: { name: any; }) => {
		typeData.push({
			name: "line",
			type: '1',
			areaStyleType: "1",
			stack: "1",
		})
	})
	let legendStyle = {
		show: true,
		icon: "rect",
		left: 'center',
		top: 0,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 5,
	};
	let gridConfig = {
		left: "1%",
		right: "1%",
		bottom: "0%",
		top: "25%",
	};
	let paramsData = barLineParamsData(
		names,
		data.xAxis,
		[
			{
				name: "套",
				type: "1",
			},
		],
		typeData,
		data.yAxis,
		[
			{
				a: "rgba(84, 112, 198, 1)",
				b: "rgba(84, 112, 198, 1)",
			},
			{
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 1)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 1)",
			},
			{
				a: "#2AC6D7",
				b: "#2AC6D7",
			},
			{
				a: "#F00D30",
				b: "#F00D30",
			},
			{
				a: "#CD83FF",
				b: "#CD83FF",
			},
		],
		legendStyle,
		gridConfig
	);
	statisticsaAreaHouseDeal.value = paramsData
	console.log(	statisticsaAreaHouseDeal.value)
}
//固定资产投资增速
const fixedInvestmentsSpeedGet = async () => {
	fixedInvestmentsSpeedData.value.cityCode = cityObjgdfdctzsjtj.value.cityCode
	let { data } = await getInvestmentDataStatistics(fixedInvestmentsSpeedData.value)
	let legendStyle = {
		show: true,
		icon: "rect",
		left: 'center',
		top: 0,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 36,
	};
	let gridConfig = {
		left: "5%",
		right: "5%",
		bottom: "3%",
		top: "25%",
	};
	let paramsData = barLineParamsData(
		[],
		data.xAxis,
		[
			{
				name: "%",
				type: "1",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.yAxis,
		],
		[
			{
				a: "rgba(14, 129, 255, 1)",
				b: "rgba(14, 129, 255, 0.2)",
			},
		],
		legendStyle,
		gridConfig
	);
	fixedInvestmentsSpeed.value = paramsData
}
//项目建成投资率
const projectComInvestmentRateGet = async () => {
	projectComInvestmentRateData.value.cityCode = cityObjgdfdctzsjtj.value.cityCode
	let { data } = await getInvestmentDataStatistics(projectComInvestmentRateData.value)
	let legendStyle = {
		show: true,
		icon: "rect",
		left: 'center',
		top: 0,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 36,
	};
	let gridConfig = {
		left: "5%",
		right: "5%",
		bottom: "3%",
		top: "25%",
	};
	let paramsData = barLineParamsData(
		[],
		data.xAxis,
		[
			{
				name: "%",
				type: "1",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.yAxis,
		],
		[
			{
				a: "rgba(14, 129, 255, 1)",
				b: "rgba(14, 129, 255, 0.2)",
			},
		],
		legendStyle,
		gridConfig
	);
	projectComInvestmentRate.value = paramsData
}
//建设项目投资增长率
const projectConInvestmentRateGet = async () => {
	projectConInvestmentRateData.value.cityCode = cityObjgdfdctzsjtj.value.cityCode
	let { data } = await getInvestmentDataStatistics(projectConInvestmentRateData.value)
	let legendStyle = {
		show: true,
		icon: "rect",
		left: 'center',
		top: 0,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 36,
	};
	let gridConfig = {
		left: "5%",
		right: "5%",
		bottom: "3%",
		top: "25%",
	};
	let paramsData = barLineParamsData(
		[],
		data.xAxis,
		[
			{
				name: "%",
				type: "1",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.yAxis,
		],
		[
			{
				a: "rgba(14, 129, 255, 1)",
				b: "rgba(14, 129, 255, 0.2)",
			},
		],
		legendStyle,
		gridConfig
	);
	projectConInvestmentRate.value = paramsData
}
//各市区交易均价分布
const houseTransPriceStatisticeGet = async () => {
	houseTransPriceStatisticeData.value.cityCode = cityObjfwjyjgqktj.value.cityCode
	let { data } = await getHouseTradePriceDistributed(houseTransPriceStatisticeData.value)
	if (houseTransPriceStatisticeData.value.queryType3 == 3) {
		let legendStyle = {
			show: true,
			icon: "rect",
			left: 'center',
			top: 0,
			itemWidth: 10,
			itemHeight: 10,
			itemGap: 36,
		};
		let gridConfig = {
			left: "5%",
			right: "5%",
			bottom: "3%",
			top: "25%",
		};
		let paramsData = barLineParamsData(
			[],
			data[0].xAxis,
			[
				{
					name: "价格",
					type: "1",
				},
			],
			[
				{
					name: "bar",
					type: '1',
					areaStyleType: "1",
					stack: "1",
				},
			],
			[
				data[0].yAxis,
			],
			[
				{
					a: "rgba(14, 129, 255, 1)",
					b: "rgba(14, 129, 255, 0.2)",
				},
			],
			legendStyle,
			gridConfig
		);
		houseTransPriceStatisticeBar.value = paramsData
	} else {

		if (data?.length) {
			houseTransPriceStatistice.value.xAxisData = []
			houseTransPriceStatistice.value.boxData = []
			houseTransPriceStatistice.value.xAxisBgColor = []
			houseTransPriceStatistice.value.yAxisMaxNumArray = []
			houseTransPriceStatistice.value.level = data[0].level
			data?.forEach(x => {
				houseTransPriceStatistice.value.xAxisData.push(x.name)
				houseTransPriceStatistice.value.boxData.push(x.priceList)
				houseTransPriceStatistice.value.code.push(x.code)
				let color = ''
				switch (x.jgfzfw) {
					case '偏低':
						color = 'rgba(255, 195, 82, 0.60)';
						break;
					case '稳定':
						color = 'rgba(90, 190, 82, 0.60)';
						break;
					default: // 分布不平衡
						color = 'rgba(31, 183, 255, 0.60)';
						break;
				}
				houseTransPriceStatistice.value.xAxisBgColor.push(color)
			})

			const yAxisMaxNum = Math.max(...houseTransPriceStatistice.value.boxData?.flat())
			houseTransPriceStatistice.value.xAxisData.forEach(x => {
				houseTransPriceStatistice.value.yAxisMaxNumArray.push(yAxisMaxNum)
			})
		}
		if (salesTrendArealDistribution.value) {
			salesTrendArealDistribution.value.updateChart()
		}
	}





}
//房屋均价交易走势
const housePriceTransTrendGet = async () => {
	housePriceTransTrendData.value.cityCode = cityObjfwjyjgqktj.value.cityCode
	let { data } = await getHouseTradePriceTrend(housePriceTransTrendData.value)
	let names: Array<any> = [];
	let values: Array<any> = [];
	const typeData: Array<any> = []
	if (housePriceTransTrendData.value.queryType1 > 0) {
		data.yAxis.forEach((item: { name: any; }) => {
			names.push(item.name);
		});
		data.yAxis.forEach((item: { value: any; }) => {
			values.push(item.value);
			typeData.push({
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			})
		});
	} else {
		typeData.push({
			name: "line",
			type: '1',
			areaStyleType: "1",
			stack: "1",
		})
		values.push(data.yAxis)
	}

	let legendStyle = {
		show: true,
		icon: "rect",
		left: 80,
		top: 0,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 5,
	};
	let gridConfig = {
		left: "1%",
		right: "1%",
		bottom: "0%",
		top: "25%",
	};
	let paramsData = barLineParamsData(
		names,
		data.xAxis,
		[
			{
				name: "元",
				type: "1",
			},
		],
		typeData,
		values,
		[
			{
				a: "rgba(14, 129, 255, 1)",
				b: "rgba(14, 129, 255, 0)",
			}, {
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 1)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 1)",
			},
			{
				a: "#2AC6D7",
				b: "#2AC6D7",
			},
			{
				a: "#F00D30",
				b: "#F00D30",
			},
			{
				a: "#CD83FF",
				b: "#CD83FF",
			},
		],
		legendStyle,
		gridConfig
	);
	housePriceTransTrend.value = paramsData
}
//各地区房屋均价交易走势
const housePriceTransStatisticsGet = async () => {
	housePriceTransStatisticsData.value.cityCode = cityObjfwjyjgqktj.value.cityCode
	let { data } = await getHouseTradePriceStatistics(housePriceTransStatisticsData.value)
	let names: Array<any> = [];
	let values: Array<any> = [];
	const typeData: Array<any> = []
	if (housePriceTransStatisticsData.value.queryType1 > 0) {
		data.yAxis.forEach((item: { name: any; }) => {
			names.push(item.name);
		});
		data.yAxis.forEach((item: { value: any; }) => {
			values.push(item.value);
			typeData.push({
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			})
		});
	} else {
		typeData.push({
			name: "bar",
			type: '1',
			areaStyleType: "1",
			stack: "1",
		})
		values.push(data.yAxis)
	}

	let legendStyle = {
		show: true,
		icon: "rect",
		left: 80,
		top: 0,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 5,
	};
	let gridConfig = {
		left: "1%",
		right: "1%",
		bottom: "0%",
		top: "25%",
	};
	let paramsData = barLineParamsData(
		names,
		data.xAxis,
		[
			{
				name: "元",
				type: "1",
			},
		],
		typeData,
		values,
		[
			{
				a: "rgba(14, 129, 255, 1)",
				b: "rgba(14, 129, 255, 0)",
			}, {
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 1)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 1)",
			},
			{
				a: "#2AC6D7",
				b: "#2AC6D7",
			},
			{
				a: "#F00D30",
				b: "#F00D30",
			},
			{
				a: "#CD83FF",
				b: "#CD83FF",
			},
		],
		legendStyle,
		gridConfig
	);
	housePriceTransStatistics.value = paramsData
}
//房屋交易行为分析散点图
const scatterDiagramDataGet = async () => {
	scatterDiagramInfo.value.cityCode = cityObjfourPieData.value.cityCode
	scatterDiagramInfo.value.queryDate = cityObjfourPieData.value.queryDate;
	let { data } = await getHouseTradeBehavioralAnalysis(scatterDiagramInfo.value)
	const colors = ['rgba(14, 129, 255, 1)', 'rgba(90, 190, 82, 1)', 'rgba(255, 195, 82, 1)', 'rgba(230, 89, 146, 1)']
	const chartsDatas: { name: any; itemStyle: { color: string; }; }[] = []
	const datas = []
	data.map((item, index) => {
		chartsDatas.push({
			name: item.name,
			itemStyle: {
				color: colors[index]
			}
		})
		datas.push(item.value)
	})
	let echartParams = {
		chartsData: chartsDatas,
		legendStyle: {
			show: true,
			icon: "rect",
			left: 'center',
			top: 20,
			itemWidth: 10,
			itemHeight: 10,
			itemGap: 36,
		},
		gridConfig: {
			left: "0%",
			right: "8%",
			bottom: "0%",
			top: "25%",
		},
		seriesStyle: {
			itemStyle: {
				borderRadius: 0,
				borderWidth: 0
			},
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 18,
					fontWeight: 'bold'
				}
			},
			labelLine: {
				show: false
			},
		},
		seriesData: datas
	}

	scatterDiagramData.value = echartParams
}
//首套购房
const buyHouseTypeFirstGet = async () => {
	buyHouseTypeFirstData.value.cityCode = cityObjfourPieData.value.cityCode;
	buyHouseTypeFirstData.value.queryDate = cityObjfourPieData.value.queryDate;
	let { data } = await getHouseTradeBehavioralAnalysisPie(buyHouseTypeFirstData.value)

	let echartParams = {
		gridStyle: {
			show: true
		},
		legendStyle: {
			show: true,
			orient: '',
			icon: "circle",
			top: 'middle',
			right: 0,
			bottom: 0,
			itemWidth: 10,
			itemHeight: 10,
			itemGap: 10,
		},
		seriesStyle: {
			radius: [42, 58],
			center: ['30%', '50%'],
			itemStyle: {
				borderRadius: 0,
				borderWidth: 0
			},
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 14,
					color: '#Fff',
					formatter: '{b} \n\n{c}'
				}
			},
			labelLine: {
				show: false
			},
		},
		seriesData: [data]

	}
	buyHouseTypeFirst.value = echartParams
}
//二套购房
const buyHouseTypeTwoGet = async () => {
	buyHouseTypeTwoData.value.cityCode = cityObjfourPieData.value.cityCode;
	buyHouseTypeTwoData.value.queryDate = cityObjfourPieData.value.queryDate;
	let { data } = await getHouseTradeBehavioralAnalysisPie(buyHouseTypeTwoData.value)

	let echartParams = {
		gridStyle: {
			show: true
		},
		legendStyle: {
			show: true,
			orient: '',
			icon: "circle",
			top: 'middle',
			right: 0,
			bottom: 0,
			itemWidth: 10,
			itemHeight: 10,
			itemGap: 10,
		},
		seriesStyle: {
			radius: [42, 58],
			center: ['30%', '50%'],
			itemStyle: {
				borderRadius: 0,
				borderWidth: 0
			},
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 18,
					color: '#Fff',
					formatter: '{b} \n\n{c}'
				}
			},
			labelLine: {
				show: false
			},
		},
		seriesData: [data]

	}
	buyHouseTypeTwo.value = echartParams
}
//多套购房
const buyHouseTypeMoreGet = async () => {
	buyHouseTypeMoreData.value.cityCode = cityObjfourPieData.value.cityCode;
	buyHouseTypeMoreData.value.queryDate = cityObjfourPieData.value.queryDate;
	let { data } = await getHouseTradeBehavioralAnalysisPie(buyHouseTypeMoreData.value)

	let echartParams = {
		gridStyle: {
			show: true
		},
		legendStyle: {
			show: true,
			orient: '',
			icon: "circle",
			top: 'middle',
			right: 0,
			bottom: 0,
			itemWidth: 10,
			itemHeight: 10,
			itemGap: 10,
		},
		seriesStyle: {
			radius: [42, 58],
			center: ['30%', '50%'],
			itemStyle: {
				borderRadius: 0,
				borderWidth: 0
			},
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 18,
					color: '#Fff',
					formatter: '{b} \n\n{c}'
				}
			},
			labelLine: {
				show: false
			},
		},
		seriesData: [data]

	}
	buyHouseTypeMore.value = echartParams
}
// 地图
const realEstateMiddle = async () => {
	let { data } = await selectThermodynamic({ adcode: cityObj.value.cityCode });
	let inventoryRegionDTOS = data.map((item: any) => ({
		name: item.cityName,
		value: [item.houseCount, item.peopleCount],
		code: item.cityCode,
		selected: fixedCityCode == item.cityCode ? true : false
	}));

	let seriesData = [inventoryRegionDTOS];
	let paramsData = {
		regions: seriesData,
	};
	realEstateMiddleData.value = paramsData
}
// 获取地图城市名
const mapNameChange = (e: { cityName: string; cityCode: string; }) => {
	if (cityObj.value.cityName == e.cityName) {
		cityObj.value = {
			cityName: "",
			cityCode: "",
		};
		activeCityName.value = false
		activeAreaName.value = false
		fatherCode.value = false
		houseTransPriceStatisticeData.value.queryType3 = 1
		setCityCode('210000')
		funAll(1);
	} else {
		cityObj.value = e;
		activeCityName.value = cityObj.value.cityName
		activeAreaName.value = false
		fatherCode.value = cityObj.value.cityCode
		houseTransPriceStatisticeData.value.queryType3 = 2
		setCityCode(cityObj.value.cityCode)
		funAll(1);
	}
}
//获取城市下拉
const getBaseDropDownGet = async () => {
	let { data } = await getRegionList({ cityCode: cityCodeDowm.value })
}
const setCityCode = (code: string | null) => {
	cityObjfdctdgytj.value.cityCode = code
	cityObjffcjytstj.value.cityCode = code
	cityObjgdfdctzsjtj.value.cityCode = code
	cityObjfwjyjgqktj.value.cityCode = code
	houseAreaStructureData.value.cityCode = code
	cityObjfourPieData.value.cityCode = code

}
//散点图条件选择房屋类型
const houseTypeIndexSet = (item: any) => {
	item.isSelected = !item.isSelected
}
//散点图条件选择户型类型
const houseTypeIndexSet1 = (item: any) => {
	item.isSelected = !item.isSelected
}
//房屋类型全选
const houseTypeAll = () => {
	houseType.value.forEach((item: any) => {
		item.isSelected = true
	})
}
//户型类型全选
const roomTypeAll = () => {
	roomType.value.forEach((item: any) => {
		item.isSelected = true
	})
}
//房屋交易套数走势tab切换
const fwjytszsIndexChild = (i) => {
	fwjytszs.value.forEach((j, index) => {
		if (index == i) {
			j.isSelect = true
			houseTradSuiteTrendData.value.queryType1 = j.value
		} else {
			j.isSelect = false
		}
	})
	houseTradSuiteTrendGet()
}
//各市区房屋交易统计tab切换
const gsqfcjytjIndexChild = (i: number) => {
	gsqfcjytj.value.forEach((j, index) => {
		if (index == i) {
			j.isSelect = true
			statisticsaAreaHouseDealData.value.queryType1 = j.value
		} else {
			j.isSelect = false
		}
	})
	// statisticsaAreaHouseDealData.value.queryType1 = i + 1
	statisticsaAreaHouseDealGet()
}
//房屋交易均价走势tab切换
const fwjyjjzsIndexChild = (i: number) => {
	housePriceTransTrendData.value.queryType1 = i
	housePriceTransTrendGet()
}
//房屋交易均价走势tab切换
const fwjyjjzsIndexChild1 = (i: number) => {
	housePriceTransStatisticsData.value.queryType1 = i
	housePriceTransStatisticsGet()
}
//当前房屋建筑面积统计-选择年份
const houseAreaStructureGetTime = () => {
	houseAreaStructureGet()
}
//各市区建筑面积统计-选择年份
const statisticsAreaEachUrbanGetTime = () => {
	statisticsAreaEachUrbanGet()
}
//房地产土地供应统计选择城市
const fdctdgytjCity = () => {
	houseAreaStructureGet()
	landSupplyTrendGet()
	statisticsAreaEachUrbanGet()
}
//房产交易套数统计选择城市
const ffcjytstjCity = () => {
	houseTradSuiteTrendGet()
	statisticsaAreaHouseDealGet()
}

//房屋交易价格情况统计选择城市
const fwjyjgqktjCity = () => {
	getCityListName(cityObjfwjyjgqktj.value.cityCode)
	houseTransPriceStatisticeData.value.queryType3 = 2
	housePriceTransTrendGet()
	housePriceTransStatisticsGet()
	houseTransPriceStatisticeGet()

}
//获取选中的城市名
const getCityListName = (code) => {
	activeAreaName.value = null
	if (code == '210000') {
		activeCityName.value = false

	} else {
		cityList.value.map(item => {
			if (item.value == code) {
				activeCityName.value = item.label
			}
		})
	}
}
//房屋交易行为分析选择城市
const foutPiejCity = () => {
	buyHouseTypeFirstGet()
	buyHouseTypeTwoGet()
	buyHouseTypeMoreGet()
}
//盒须图区code获取数据
const getCode = (item: string) => {
	if (item.level == 1) {
		houseTransPriceStatisticeData.value.queryType3 = 1
		houseTransPriceStatisticeGet()
		fatherCode.value = false
	}
	if (item.level == 2) {
		houseTransPriceStatisticeData.value.queryType3 = 2
		activeCityName.value = item.cityName
		cityObjfwjyjgqktj.value.cityCode = item.cityCode
		fatherCode.value = item.cityCode
		houseTransPriceStatisticeGet()
	}
	if (item.level == 3) {
		houseTransPriceStatisticeData.value.queryType3 = 3
		activeAreaName.value = item.cityName
		cityObjfwjyjgqktj.value.cityCode = item.cityCode
		houseTransPriceStatisticeGet()
	}
}
//盒须图返回省
const returnProvince = () => {
	if (houseTransPriceStatisticeData.value.queryType3 != 1) {
		houseTransPriceStatisticeData.value.queryType3 = 1
		activeAreaName.value = null
		activeCityName.value = null
		cityObjfwjyjgqktj.value.cityCode = '210000'
		houseTransPriceStatisticeGet()
		fatherCode.value = false
	}
}
//盒须图返回市
const returnCity = (city) => {
	if (houseTransPriceStatisticeData.value.queryType3 == 3) {
		houseTransPriceStatisticeData.value.queryType3 = 2
		// cityObjfwjyjgqktj.value.cityCode = fatherCode
		activeAreaName.value = null
	}
}
//散点图查询
const search = () => {
	scatterDiagramInfo.value.fwlxList = houseType.value.filter(item => item.isSelected).map(item => {
		return item.value
	})
	scatterDiagramInfo.value.hxList = roomType.value.filter(item => item.isSelected).map(item => {
		return item.value
	})
	scatterDiagramInfo.value.startDj = housePrice.value[0]
	scatterDiagramInfo.value.endDj = housePrice.value[1]
	scatterDiagramInfo.value.startMj = houseArea.value[0]
	scatterDiagramInfo.value.endMj = houseArea.value[1]
	scatterDiagramDataGet()
}
//右下角4饼图类型切换
const pieTab = (index) => {
	cityObjfourPieData.value.queryType1 = index
	buyHouseTypeFirstData.value.queryType1 = index
	buyHouseTypeTwoData.value.queryType1 = index
	buyHouseTypeMoreData.value.queryType1 = index
	buyHouseTypeFirstGet()
	buyHouseTypeTwoGet()
	buyHouseTypeMoreGet()
}
//三个饼图点击时间
const getTime = () => {
	buyHouseTypeFirstGet()
	buyHouseTypeTwoGet()
	buyHouseTypeMoreGet()
	scatterDiagramDataGet()
}
//各市区房产交易统计点击时间
const statisticsaAreaHouseDealDataGetTime = () => {
	statisticsaAreaHouseDealGet()
}
//左下角三个地图选中时间
const threeBarTimeGet = () => {
	fixedInvestmentsSpeedData.value.queryYear = threeBarTime.value
	projectComInvestmentRateData.value.queryYear = threeBarTime.value
	projectConInvestmentRateData.value.queryYear = threeBarTime.value

	fixedInvestmentsSpeedGet()
	projectComInvestmentRateGet()
	projectConInvestmentRateGet()
}
//各地区房屋交易均价统计选择时间
const housePriceTransStatisticsTime = () => {
	housePriceTransStatisticsGet()
}
const funAll = (i) => {
	if (i == 1) {
		houseAreaStructureGet()
		landSupplyTrendGet()
		statisticsAreaEachUrbanGet()
		houseTradSuiteTrendGet()
		statisticsaAreaHouseDealGet()
		housePriceTransTrendGet()
		housePriceTransStatisticsGet()
		scatterDiagramDataGet()
		houseTransPriceStatisticeGet()
		buyHouseTypeFirstGet()
		buyHouseTypeTwoGet()
		buyHouseTypeMoreGet()
	} else {
		houseAreaStructureGet()
		landSupplyTrendGet()
		statisticsAreaEachUrbanGet()
		houseTradSuiteTrendGet()
		statisticsaAreaHouseDealGet()
		housePriceTransTrendGet()
		housePriceTransStatisticsGet()
		scatterDiagramDataGet()
		houseTransPriceStatisticeGet()
		fixedInvestmentsSpeedGet()
		projectComInvestmentRateGet()
		projectConInvestmentRateGet()
		buyHouseTypeFirstGet()
		buyHouseTypeTwoGet()
		buyHouseTypeMoreGet()
	}
}


// 打开柱状折线弹框
const dialogData = (val) => {
	magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val) => {
	magnifyEchartData.value = null
}
// 打开饼图弹框
const dialogPieData = (val) => {
	magnifyPieEchartData.value = val
}
//关闭饼图弹框
const closePieDialog = (val) => {
	magnifyPieEchartData.value = null
}
// 打开饼图弹框1
const dialogPieData1 = (val) => {
	magnifyPieEchartData1.value = val

}
//关闭饼图弹框1
const closePieDialog1 = (val) => {
	magnifyPieEchartData1.value = null
}
const barPiemagnify = (val) => {
	magnifyPieEcData.value = val
}
const closeBarPiemagnify = (val) => {
	magnifyPieEcData.value = null
}
//打开散点图弹框
const scatterDiagramMagfiil = (val) => {
	magnifyPieCcatterData.value = val
}
//关闭散点图弹框
const closeSctterDialog = (val) => {
	magnifyPieCcatterData.value = null
}
onMounted(() => {

	const now = new Date();
	let year = now.getFullYear();
	let month = now.getMonth() + 1;
	if (month < 10) {
		month = '0' + month;
	}
	cityObjfourPieData.value.queryDate = year - 2 + '-01'
	houseAreaStructureData.value.queryYear = now.getFullYear() - 2 + ''
	statisticsAreaEachUrbanData.value.queryYear = now.getFullYear() - 2 + ''
	statisticsaAreaHouseDealData.value.queryYear = now.getFullYear() - 2 + ''
	threeBarTime.value = now.getFullYear() - 2 + ''
	housePriceTransStatisticsData.value.queryYear = now.getFullYear() - 2 + ''
	cityObj.value = getCityName(localStorage.getItem("cityCode"))
	cityObjfdctdgytj.value.cityCode = localStorage.getItem("cityCode")
	cityObjffcjytstj.value.cityCode = localStorage.getItem("cityCode")
	cityObjgdfdctzsjtj.value.cityCode = localStorage.getItem("cityCode")
	cityObjfwjyjgqktj.value.cityCode = localStorage.getItem("cityCode")
	cityObjfourPieData.value.cityCode = '210100'
	if (cityObjfwjyjgqktj.value.cityCode == '210000') {
		houseTransPriceStatisticeData.value.queryType3 = 1
	} else {
		houseTransPriceStatisticeData.value.queryType3 = 2
	}
	if (localStorage.getItem("cityCode") != '210000') {
		cityList.value[0].disabled = true
	}
	search()
	getBaseDropDownGet()
	realEstateMiddle()
	funAll(0);
})
</script>
<style scoped lang='less'>
.pageBox {
	width: 100vw;
	height: 100vh;
	background-image: url("@/assets/img/houseDetecAnalysis/pageBg.png");
	background-size: 100% 100%;
	overflow: auto;
	color: #FFFFFF;

	// 隐藏滚动条
	&::-webkit-scrollbar {
		width: 0px;
	}

	.page-head {
		background-image: url("@/assets/img/houseDetecAnalysis/headBg.png");
		background-size: 100% 100%;
		width: 100vw;
		height: 90px;
		font-size: 36px;
		color: #FFFFFF;
		text-align: center;
		padding-top: 12px;
		box-sizing: border-box;
		margin-bottom: 22px;
	}

	.page-body {
		width: 100vw;
		height: calc(100vh - 112px);
		display: flex;
		padding: 0px 20px;
		padding-bottom: 43px;
		box-sizing: border-box;

		.body-left {
			width: 648px;
			height: 100%;

			.house-property-land-supply-statistics {
				height: 410px;

				.city-select {
					.el-select {
						position: relative;
						bottom: 10px;
					}
				}

				.grid-body {
					.grid-body-top {
						.grid-body-child {
							width: 49%;
						}
					}
				}
			}

			.real-estate-trans-num-statistics {
				height: 257px;
				margin-top: 16px;

				.city-select {
					position: relative;
					bottom: 10px;
				}

				.grid-body {
					.grid-body-child {
						width: 50%;

						.grid-tabs {
							.tabs-list {
								font-size: 12px;
								color: #FFFFFF;
								width: 52px;
								height: 20px;
								box-shadow: inset 0px 0px 8px 0px #3D7FFF;
								border-radius: 4px;
								border: 1px solid #0839A7;
								margin: 0px 1px;
								white-space: nowrap;
							}

							.tabs-list-click {
								background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%) !important;
								box-shadow: inset 0px 0px 8px 0px #3D7FFF !important;
								border-radius: 4px !important;
								white-space: nowrap;
							}

							.tabs-list:hover {
								cursor: pointer;
							}
						}
					}

					.grid-body-child:nth-child(1) {
						padding-right: 10px;
					}

					.grid-body-child:nth-child(2) {
						padding-left: 10px;
					}
				}
			}

			.real-estate-investment-data-statistics {
				height: 223px;
				margin-top: 16px;

				.city-select {
					position: relative;
					bottom: 10px;
				}

				.grid-body-child {
					width: 33%;
				}
			}
		}

		.body-right {

			margin-left: 16px;
			width: calc(100vw - 664px);

			.body-right-top {
				.map-box {
					padding-top: 50px;
					width: 500px;
					height: 400px;
				}

				.map-address {
					position: absolute;
					top: 0px;
					left: 0px;
					letter-spacing: 1px;
					text-shadow: 0px 1px 2px #c1731c;
					font-size: 18px;
					color: #60f9f4;
					letter-spacing: 1.2px;
					margin-left: 27px;
				}

				.house-trans-price-statistics {

					.city-select {
						position: relative;
						bottom: 5px;
					}

					width: 726px;
					height: 478px;

					.grid-title {
						justify-content: space-between;

						img {
							width: 7px;
							height: 5px;
						}
					}

					.grid-body {
						.grid-body-top {
							.grid-body-child {
								.child-title-right {
									font-size: 14px;
									color: #1FB7FF;
								}
							}
						}

						.grid-body-bottom {
							.grid-body-child {
								width: 50%;

								.grid-tabs {
									.tabs-list {
										font-size: 12px;
										color: #FFFFFF;
										box-shadow: inset 0px 0px 8px 0px #3D7FFF;
										border-radius: 4px;
										border: 1px solid #0839A7;
										margin: 0px 1px;
										padding: 3px 0px;
										white-space: nowrap;
									}

									.tabs-list-click {
										background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%) !important;
										box-shadow: inset 0px 0px 8px 0px #3D7FFF !important;
										border-radius: 4px !important;
										white-space: nowrap;
									}

									.tabs-list:hover {
										cursor: pointer;
									}
								}
							}

							.grid-body-child:nth-child(1) {
								padding-right: 10px;
							}

							.grid-body-child:nth-child(2) {
								padding-left: 10px;
							}
						}
					}
				}
			}

			.body-right-bottom {
				margin-top: 16px;

				.time-city {
					align-items: center;
					margin-bottom: 10px;
					position: relative;
					bottom: 8px;
				}

				.time-select {
					position: relative;
					right: 20px;
					display: flex;
					align-items: center;
				}

				.city-select {
					height: 24px;
					margin-bottom: 0.02604rem;

					.el-select {
						height: 24px;
						position: relative;
						// bottom: 10px;
					}
				}

				.grid-body {
					padding: 20px 7px 7px 25px;

					.grid-body-child:first-child {
						position: relative;
						width: 357px;
						height: 348px;
						border-radius: 8px;
						border: 1px solid #63FCFF;
						padding: 14px 14px;
						box-sizing: border-box;

						.control-box {
							.control-box-item {
								flex-wrap: nowrap !important;

								.control-item-name {
									font-size: 16px;
									padding: 0px 3px;
								}

								.control-item-label {
									width: 212px;
									display: flex;
									flex-wrap: wrap;

									.control-label-list {
										padding: 3px 5px;
										box-shadow: inset 0px 0px 8px 0px #3D7FFF;
										border-radius: 8px;
										border: 1px solid #0839A7;
										font-size: 12px;

										margin-left: 5px;
										cursor: pointer;
										height: 25px;
										// margin-bottom: 5px;
									}

									.control-label-list-active {
										padding: 3px 5px;
										background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
										box-shadow: inset 0px 0px 8px 0px #3D7FFF;
										border-radius: 8px;
										border: 1px solid #0839A7;
										font-size: 12px;

										margin-left: 5px;
										cursor: pointer;
									}

									.control-label-list-active {}
								}

								.control-silder {
									display: flex;
									align-items: center;
									width: 282px;

									.el-slider {
										margin-left: 20px;
										margin-right: 20px;
										width: 95px;
									}

									.silder-money {
										width: 50px;
										height: 16px;
										background: #001A35;
										box-shadow: inset 0px 0px 8px 0px #3D7FFF;
										border-radius: 8px;
										border: 1px solid #0839A7;
										font-size: 12px;
										display: flex;
										align-items: center;
										justify-content: center;
										margin: 0px 5px;

									}

									.unit {
										font-size: 12px;
										width: 25px;
									}
								}

								.control-all {
									font-size: 12px;
									color: #1FB7FF;
									text-decoration: underline;
									cursor: pointer;
									margin-left: 10px;
								}
							}

							.control-button {
								width: 160px;
								height: 35px;
								background: url('../../assets/img/houseDetecAnalysis/controlButton.png');
								background-size: 100% 100%;
								font-size: 16px;
								display: flex;
								align-items: center;
								justify-content: center;
								position: absolute;
								bottom: 25px;
								left: 50%;
								transform: translateX(-50%);
							}

							.control-button:hover {
								cursor: pointer;
							}
						}
					}

					.scatter {
						width: 338px;
						margin-left: 35px;
						height: 348px;
					}

					.pie-box {
						width: 440px;
						height: 348px;
						flex-wrap: wrap;

						.pie-list {
							width: 215px;
							height: 155px;
							margin-top: 10px;

							.pie-title {
								text-align: center;
								font-weight: bold;
								font-size: 14px;
							}
						}

						.pieTab {
							position: absolute;
							right: 0px;
							z-index: 9;
							top: -10px;

							.pieTab-index {
								width: 70px;
								height: 25px;
								box-shadow: inset 0px 0px 8px 0px #3D7FFF;
								border-radius: 4px;
								border: 1px solid #0839A7;
								font-size: 14px;
								color: #FFFFFF;
								display: flex;
								align-items: center;
								justify-content: center
							}

							.pieTab-index:last-child {
								margin-top: 6px;
							}

							.pieTab-index-active {
								background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
								box-shadow: inset 0px 0px 8px 0px #3D7FFF;
								border-radius: 4px;
							}

							.pieTab-index:hover {
								cursor: pointer;
							}
						}
					}
				}
			}

		}
	}

	.page-grid {
		background-image: url("@/assets/img/houseDetecAnalysis/gridBg.png");
		background-size: 100% 100%;
		padding: 12px 11px;
		box-sizing: border-box;

		.grid-title {
			height: 29px;
			background-image: url("@/assets/img/houseDetecAnalysis/titleBg.png");
			background-size: 100% 100%;
			font-size: 18px;
			color: #FFFFFF;
			padding-left: 26px;

			span {
				position: relative;
				bottom: 2px;
			}
		}

		.grid-title1 {
			height: 29px;
			background-image: url("@/assets/img/houseDetecAnalysis/titleBg1.png");
			background-size: 100% 100%;
			font-size: 18px;
			color: #FFFFFF;
			padding-left: 39px;

			span {
				position: relative;
				bottom: 2px;
			}
		}

		.city-select {
			width: 78px;
			height: 20px;

		}

		.gsqfcjytj {
			position: relative;

			.time-select {
				position: absolute;
				right: 0px;
				bottom: 100px;
				z-index: 9;
			}
		}

		.gdfdctzsjtj {
			position: relative;

			.time-select {
				position: absolute;
				right: 0px;
				bottom: 5px;
				z-index: 9;
			}
		}

		.gdqfwjyjjtj {
			position: relative;

			.time-select {
				position: absolute;
				right: 0px;
				top: 75px;
				z-index: 9;
			}
		}

		.grid-body-child {

			.child-title {
				font-size: 14px;
				color: #FFFFFF;
				margin-top: 11px;
				margin-bottom: 10px;
				white-space: nowrap;
			}

			.m20 {
				margin-top: 20px;
			}

			.m30 {
				margin-top: 30px;
			}

			.pieH {
				height: 157px;
			}

			.h130 {
				height: 120px;
			}

			.h165 {
				height: 165px;
			}

			.h135 {
				height: 135px;
			}

			.h170 {
				height: 170px;
			}

			.h180 {
				height: 175px;
			}

			.h348 {
				height: 348px;
			}
		}
	}
}

.fands .control-label-list {
	margin-bottom: 10px;
}

::v-deep .el-select__wrapper {
	background: #001A35;
	box-shadow: inset 0px 0px 8px 0px #3D7FFF;
	border-radius: 8px;
	border: 1px solid #1FB7FF;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
}

.select-option-city {
	color: #ffffff !important;
	background: #1C5BCC;
}

.select-option-city.is-selected {
	color: #00e0ff;
}

.select-option-city:hover {
	background: #368CF2;
}


/deep/ .el-select__wrapper {
	background: #001A35;
	box-shadow: inset 0px 0px 8px 0px #3D7FFF;
	border-radius: 8px;
	border: 1px solid #1FB7FF;

	.el-select__selected-item {
		font-size: 14px;
		color: #FFFFFF;
	}
}

/deep/ .page-body .el-input__wrapper {
	background: #001A35;
	box-shadow: inset 0px 0px 8px 0px #3D7FFF;
	border-radius: 8px;
	border: 1px solid #1FB7FF;

	.el-input__inner {
		font-size: 13px;
		color: #D7DDE2;
	}

	.el-range-input,
	.el-range-separator {
		font-size: 13px;
		color: #D7DDE2;
	}
}

/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
	width: 80px;
	height: 24px;

}

/deep/ .body-right-bottom .el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
	width: 100px;
	height: 24px;
}

:deep(.el-date-editor) {
	opacity: 1;
}
</style>
